<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<jsp:include page="/base.jsp" />
<meta charset="UTF-8">
<meta name="author" content="order by dede58.com" />
<title>小米商城-个人中心</title>
<link rel="stylesheet" type="text/css" href="mall/css/style.css">
<style>
select {
	width: 100px;
	height: 30px;
}

input {
	width: 200px;
	height: 30px
}
</style>
</head>
<body>
	<!-- start header -->
	<%@ include file="top.jsp"%>


	<!--end header -->
	<%@ include file="header.jsp"%>
	<!--end header -->
	<!-- start banner_x -->

	<!-- end banner_x -->
	<!-- self_info -->
	<div class="grzxbj">
		<div class="selfinfo center">
			<%@ include file="left.jsp"%>
			<div class="rtcont fr">
				<div class="ddzxbt">添加地址</div>
				<br>
				<form method="post" action="shop/doAddress">
					<p>地址:</p>
					<select id="select1" name="fCode">
						<c:forEach items="${select1}" var="select1">
							<option value="${select1.areaCode}">${select1.areaName}</option>
						</c:forEach>
					</select> <select id="select2" name="sCode">
						<c:forEach items="${select2}" var="select2">
							<option value="${select2.areaCode}">${select2.areaName}</option>
						</c:forEach>
					</select> <select id="select3" name="tCode">
						<c:forEach items="${select3}" var="select3">
							<option value="${select3.areaCode}">${select3.areaName}</option>
						</c:forEach>

					</select><br> <br> 详细地址: <input type="text" name="detaAddress"><br>
					<br> 邮政编码: <input type="text" name="postCode"><br>
					<br> 手机号码: <input type="text" name="rePhone"><br>
					<br> <input type="submit" value="提交"
						style="height: 30px; width: 100px">
				</form>
			</div>
			<div class="clear"></div>
		</div>
	</div>
	<!-- self_info -->

	<%@ include file="foot.jsp"%>
</body>
</html>
<script src="jQuery/jquery-3.4.1.js"></script>
<script>
function select2(){
	return $.ajax({
		type:'post',
		url:'shop/findByParentCode',
		data:{'parentCode':$('#select1').val()},
		success:function(result){
			var options ='';
			if(result){
				$.each(result,function(index ,item){
					options+='<option value="'+item.areaCode+'">'+item.areaName+'</option>';
				});
			}
			
			$('#select2').html(options);
			
			
		}
			
	});
}
function select3(){
	return $.ajax({
		type:'post',
		url:'shop/findByParentCode',
		data:{'parentCode':$('#select2').val()},
		success:function(result){
			var options ='';
			if(result){
				$.each(result,function(index ,item){
					options+='<option value="'+item.areaCode+'">'+item.areaName+'</option>';
				});
			}
			
			$('#select3').html(options);
			
			
		}
			
	});
}


$('#select1').off('change').on('change',function(){
	select2().done(function(){
		select3();
	})
})

$('#select2').off('change').on('change',function(){

		select3();
	
})














</script>
